<template>
    <div class="screen-block">
        <Title>{{ $t('screen.fuelGun') }}</Title>
        <div style="width: 100%; height: 100%">
            <scroll-board :config="config" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { ScrollBoard } from '@kjgl77/datav-vue3';
    import useTimeExecutor from '@/hooks/useTimeExecutor';
    import Title from '../title.vue';
    import { queryCurrentFuelGun } from '../../service';

    const { t } = useI18n();

    const config = ref({
        header: [
            t('screen.gun.gunNo'),
            t('screen.gun.fuelName'),
            t('screen.gun.orderNum'),
            t('screen.gun.totalVolume'),
        ],
        data: [],
        index: false,
        columnWidth: [50],
        align: ['center'],
    });
    const fetchData = async () => {
        const data = await queryCurrentFuelGun();
        const { result } = data as any;
        config.value.data = result.map((o: any) => {
            return [o.gunNo, o.fuelName, o.orderNum, o.totalVolume];
        });
    };
    fetchData();
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData,
    });
</script>

<style lang="less">
    .screen-block {
        width: 100%;
        height: 100%;
    }
</style>
